<template>
     <view class="wrap-box" :style="varStatusBarHeight">
     	 <view class="box">
     		<view class="max-size" :style="`position:absolute; z-index:-1; background-color:${backgroundColor}; background-image:${backgroundImage}; opacity:${opacity};`"></view>
     		<!-- #ifndef H5 -->
			<view class="status-bar"></view>
     		<!-- #endif -->
     		<view class="navigation-bar-box flex-items-center">
				<slot name="left">
					<template v-if="showIcon">
						<navigator
						   class="navigateBack flex-center"
						   v-if="currentPagesListLength > 1"
						   open-type="navigateBack"
						   hover-class="none"
						>
						   <text class="iconfont icon-back" :style="`color:${titleColor}; font-size:24px;`"></text>
						</navigator>
						<navigator
						   class="navigateBack flex-center"
						   v-else-if="currentPageShowHomeIcon"
						   :url="backHomeUrl"
						   open-type="reLaunch"
						   hover-class="none"
						>
						    <view class="navigateBack-bg flex-center"></view>
							<text class="iconfont icon-home" :style="`color:${titleColor};`"></text>
						</navigator>	
					</template>	
				</slot>
				<slot name="title">
					<view class="title flex-center" :style="`color:${titleColor}; font-size:${titleSize};`">
						<slot>{{titleText}}</slot>
					</view>					
				</slot>
				<slot name="right"></slot>
     		</view>
     	 </view>
     </view>
</template>

<script>
	import pagesJson from "@/pages.json"
	const {
		pages:[
			{
				path:pagesFirstUrl
			}={}
		]={},
		tabBar:{
			list:tabBarList,
			list:[
				{
					pagePath:tabBarFirstUrl
				}={}
			]=[]
		}={}
	} = pagesJson;
	export default {
		name: '',
		props: {
			backgroundColor:{
				type:String,
				default:'#F8F8F8'
			},
			backgroundImage:String,
			titleText:String,
			titleColor:{
				type:String,
				default:'#000000'
			},
			titleSize:{
				type:String,
				default:'16px'
			},
			scrollTop:{
				type:Number,
				default(){
					return null;
				}
			},
			showIcon:{
				type:Boolean,
				default(){
					return true;
				}
			},
			homeUrl:String,
		},
		data() {
			return {
				statusBarHeight:20,
				navigationBarHeight:44,
				currentPagesListLength:0,
				currentPageShowHomeIcon:false,
				varStatusBarHeight:"--statusBarHeight:0px;"
			};
		},
		computed:{
			opacity(){
				let {statusBarHeight,navigationBarHeight,scrollTop} = this;
				let height = navigationBarHeight;
				// #ifndef H5
				height += statusBarHeight;
				// #endif
				return (scrollTop > height || scrollTop === null ? 1 : scrollTop / height).toFixed(2);
			},
			backHomeUrl(){
				return (this.homeUrl || tabBarFirstUrl || pagesFirstUrl).replace(/^([^\/].+)/,'/$1');
			}
		},
		onLoad() {

		},
		created() {
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			this.currentPagesListLength = pages.length;
			this.currentPageShowHomeIcon = tabBarList.findIndex(item => item.pagePath === page.route) === -1 && page.route !== pagesFirstUrl;
			uni.getSystemInfo({
				success: (res) => {
					let systemInfo = res;
					this.statusBarHeight = systemInfo.statusBarHeight;
					// #ifndef H5
					this.varStatusBarHeight = `--statusBarHeight:${systemInfo.statusBarHeight}px;`;
					// #endif
				}
			})
		},
		watch: {

		},
		methods: {
           
		},
		mounted() {

		},
	};
</script>
<style scoped>
	@import "./iconfont.css";
	.flex-items-center{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}
	.flex-center{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}
	.max-size{
		width:100%;
		height:100%;
	}
	.wrap-box{
		width:100%;
		position: relative;
		z-index:996;
		flex:none;
		height: calc(44px + var(--statusBarHeight));
		/* background-color:red; */
	}
	.box{
		width:inherit;
		height: inherit;
		/* background-color:#ff0; */
		/* border-bottom:2rpx solid #ff0; */
		position:fixed;
		left:0;
		top:0;
		z-index:1;
		transition: all .3s;
	}
	.status-bar{
		height: var(--statusBarHeight);
		/* min-height:env(safe-area-inset-top); */
		/* border-bottom:2rpx solid #f0f; */
	}
	.navigation-bar-box{
		position:relative;
		z-index: 2;
		height:44px;
	}
	.title{
		position:absolute;
		left:70px;
		right:70px;
		box-sizing: border-box;
		font-family: '微软雅黑';
		font-weight: bold;
		font-style: normal;
		font-size: 32rpx;
		color: inherit;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		padding:0 95px;
	}
	.navigateBack{
		width:44px;
		height:100%;
		position:relative;
		z-index:2;
	}
	.navigateBack-bg{
		width:30px;
		height:30px;
		border-radius:50%;
		background-color:#c3c8ca;
		position:absolute;
		left:50%;
		top:50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.icon-home{
		position:relative;
		z-index: 1;
	}
	.navigateBack:active{
		opacity: .7;
	}
	/* .icon-right-btn:after{
	  content:"";
	  display:block;
	  border-right:2px solid #777;
	  border-bottom:2px solid #777;
	  transform-origin: center;
	  transform:rotate(-45deg);
	  width:10px;
	  height:10px;
	}
	.icon-bottom-btn{
	  transition:all .3s;
	  margin-left:12px;
	  transform-origin:0 50%;
	}   .icon-bottom-btn:after{
	      content:"";
	      display:block;
	      border-right:2px solid #777;
	      border-bottom:2px solid #777;
	      transform-origin:50%;
	      transform:rotate(45deg) translate(-25%);
	      width:10px;
	      height:10px;
	    }
	.navigateBack .icon-right-btn{
		transform: rotate(180deg) scale(1.3);
	}
	.navigateBack .icon-right-btn:after{
		border-color:inherit;
	} */
</style>